<template>
  <div class="character-manager">
    <!-- 左侧角色列表 -->
    <div class="character-list">
      <div class="section-header">
        <i class="mdi mdi-account-group"></i>
        <h3>角色列表</h3>
      </div>
      <div
          v-for="character in characters"
          :key="character.id"
          class="character-item"
          :class="{ active: selectedCharacter?.id === character.id }"
          @click="selectCharacter(character)"
      >
        <img
            :src="`https://mc-heads.net/avatar/${character.uuid}/50`"
            class="character-avatar"
            alt="avatar"
        >
        <span class="character-name">{{ character.shortName }}</span>
      </div>
      <button class="add-character" @click="showCreateForm = true">
        <i class="mdi mdi-plus"></i> 添加角色
      </button>
    </div>

    <!-- 中间角色信息区 -->
    <div class="character-info">
      <template v-if="selectedCharacter">
        <div class="info-card">
          <div class="info-header">
            <h3><i class="mdi mdi-account-details"></i> 角色信息</h3>
            <button class="edit-btn" @click="toggleEditMode">
              <i class="mdi" :class="editMode ? 'mdi-close' : 'mdi-pencil'"></i>
              {{ editMode ? '取消' : '编辑' }}
            </button>
          </div>

          <div v-if="!editMode" class="info-content">
            <div class="info-row">
              <span class="info-label">角色名称</span>
              <span class="info-value">{{ selectedCharacter.name }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">角色前缀</span>
              <span class="info-value" v-html="MinecraftFormatter.parse(selectedCharacter.prefix)"></span>
            </div>
            <div class="info-row">
              <span class="info-label">所在组</span>
              <span class="info-value" v-html="MinecraftFormatter.parse(selectedCharacter.group)"></span>
            </div>
            <div class="info-row">
              <span class="info-label">创建时间</span>
              <span class="info-value">{{ formatDate(selectedCharacter.createdAt) }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">最后登录</span>
              <span class="info-value">{{ formatDate(new Date()) }}</span>
            </div>
          </div>

          <div v-else class="edit-content">
            <div class="form-group">
              <label>角色名称</label>
              <input
                  v-model="selectedCharacter.name"
                  type="text"
                  placeholder="输入角色名"
              >
            </div>
            <div class="form-group">
              <label>角色前缀</label>
              <input
                  v-model="selectedCharacter.prefix"
                  type="text"
                  placeholder="输入角色前缀"
              >
            </div>
            <div class="form-group">
              <label>所在组</label>
              <input
                  v-model="selectedCharacter.group"
                  type="text"
                  placeholder="输入所在组"
              >
            </div>

            <div class="info-actions">
              <button class="save-btn" @click="saveChanges">
                <i class="mdi mdi-content-save"></i> 保存更改
              </button>

              <div class="more-actions">
                <button class="toggle-more" @click="toggleMoreActions">
                  <i class="mdi" :class="showMoreActions ? 'mdi-chevron-up' : 'mdi-chevron-down'"></i>
                  更多操作
                </button>
                <div v-if="showMoreActions" class="more-actions-content">
                  <button class="delete-btn" @click="deleteCharacter">
                    <i class="mdi mdi-delete"></i> 删除角色
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div v-else class="info-placeholder">
        <i class="mdi mdi-arrow-left"></i>
        <p>请从左侧选择角色</p>
      </div>
    </div>

    <!-- 模型预览区 -->
    <div class="skin-preview">
      <div class="preview-wrapper">
        <!-- 当前模型 -->
        <div class="current-model">
          <div class="preview-header">
            <h3><i class="mdi mdi-account"></i> 当前皮肤</h3>
          </div>
          <div class="preview-container">
            <div class="fixed-aspect-ratio">
              <canvas ref="viewerCanvas"></canvas>
            </div>
          </div>
          <div v-if="selectedCharacter" class="skin-controls">
            <div class="animation-controls">
              <button @click="toggleAnimation">
                <i class="mdi" :class="isAnimating ? 'mdi-pause' : 'mdi-play'"></i>
              </button>
              <select v-model="currentAnimationType" @change="updateAnimation">
                <option value="walk">行走</option>
                <option value="run">奔跑</option>
                <option value="idle">站立</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 皮肤预览 -->
        <div class="skin-preview-model">
          <div class="preview-header">
            <h3><i class="mdi mdi-eye"></i> 皮肤预览</h3>
          </div>
          <div v-show="selectedSkinIndex >= 0" class="preview-container">
            <div class="fixed-aspect-ratio">
              <canvas ref="previewCanvas"></canvas>
            </div>
          </div>
          <div v-show="selectedSkinIndex < 0" class="preview-placeholder">
            <i class="mdi mdi-image-search"></i>
            <p>选择皮肤可以预览</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧我的皮肤 -->
    <div class="my-skins">
      <div class="section-header">
        <i class="mdi mdi-image-multiple"></i>
        <h3>我的皮肤</h3>
      </div>
      <div class="skin-grid">
        <div
            v-for="(skin, index) in paginatedSkins"
            :key="index"
            class="skin-card"
            :class="{ selected: selectedSkinIndex === (currentPage - 1) * pageSize + index }"
            @click="selectSkin((currentPage - 1) * pageSize + index)"
        >
          <div class="skin-image-container">
            <img :src="`https://mc-heads.net/skin/${skin.uuid}`" class="skin-image" alt="skin">
          </div>
          <div class="skin-name">{{ skin.name }}</div>
        </div>
      </div>

      <div class="skin-footer">
        <el-pagination
            layout="prev, pager, next"
            :total="skinLibrary.length"
            :page-size="pageSize"
            v-model:current-page="currentPage"
            @current-change="handlePageChange"
        />
        <button class="save-skin-btn" @click="saveSkinChanges" v-if="selectedCharacter">
          <i class="mdi mdi-content-save"></i> 保存皮肤
        </button>
      </div>
    </div>

    <!-- 创建角色弹窗 -->
    <el-dialog
        v-model="showCreateForm"
        title="创建新角色"
        width="500px"
        :before-close="handleClose"
    >
      <div class="form-group">
        <label>角色名称</label>
        <el-input v-model="newCharacter.name" placeholder="输入角色名" />
      </div>
      <div class="form-group">
        <label>皮肤 UUID</label>
        <el-input v-model="newCharacter.uuid" placeholder="输入 Minecraft UUID" />
      </div>
      <template #footer>
<span class="dialog-footer">
<el-button @click="showCreateForm = false">取消</el-button>
<el-button type="primary" @click="createCharacter">创建</el-button>
</span>
      </template>
    </el-dialog>

    <!-- 确认删除弹窗 -->
    <el-dialog
        v-model="showDeleteConfirm"
        title="确认删除"
        width="400px"
    >
      <span>确定要删除 {{ deleteCharacterName }} 吗？</span>
      <template #footer>
<span class="dialog-footer">
<el-button @click="showDeleteConfirm = false">取消</el-button>
<el-button type="danger" @click="confirmDelete">确定</el-button>
</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { SkinViewer, WalkingAnimation, RunningAnimation, IdleAnimation } from 'skinview3d'
import {ElMessage, ElMessageBox} from "element-plus";
import {MinecraftFormatter} from "@/utils/color-util.js";

// 角色数据
const characters = ref([
  {
    id: 1,
    name: "Steve",
    shortName: "Steve",
    uuid: "6f5c53177c9c461dba5c0bf7df84028f",
    prefix: "&f[&aVIP&f]",
    group: "&a会员",
    createdAt: new Date('2023-01-15')
  },
  {
    id: 2,
    name: "Alex",
    shortName: "Alex",
    uuid: "853c80ef3c3749fdaa14938d48e9e9a4",
    prefix: "[战士]",
    group: "战士组",
    createdAt: new Date('2023-02-20')
  },
  {
    id: 3,
    name: "Enderman",
    shortName: "Enderman",
    uuid: "069a79f444e94726a5befca90e38aaf5",
    prefix: "[法师]",
    group: "法师组",
    createdAt: new Date('2023-03-10')
  }
])

// 皮肤库数据
const skinLibrary = ref([
  { name: "默认皮肤", uuid: "6f5c53177c9c461dba5c0bf7df84028f" },
  { name: "战士皮肤", uuid: "c6c8473dd1844f74bab28688eb0c4578" },
  { name: "法师皮肤", uuid: "069a79f444e94726a5befca90e38aaf5" },
  { name: "忍者皮肤", uuid: "f84acc1455bc4df58ecc99ad2731d67a" },
  { name: "海盗皮肤", uuid: "ee888fd9082049dea56b7dad6c18ee50" },
  { name: "机器人皮肤", uuid: "45266e44ca5e465d8846ed193bb68496" },
  { name: "圣诞皮肤", uuid: "a1c9c4a3c4e94a4f9e4c4a3c4e94a4f9" },
  { name: "万圣节皮肤", uuid: "b2d8e5f3c4e94a4f9e4c4a3c4e94a4f9" }
])

// 响应式数据
const selectedSkinIndex = ref(-1)
const selectedCharacter = ref(null)
const showCreateForm = ref(false)
const newCharacter = ref({ name: "", uuid: "" })
const isAnimating = ref(true)
const currentAnimationType = ref('walk')
const editMode = ref(false)
const showMoreActions = ref(false)
const currentPage = ref(1)
const pageSize = ref(6)
const showDeleteConfirm = ref(false)
const deleteCharacterName = ref('')
const deleteCharacterId = ref(null)

// 分页皮肤数据
const paginatedSkins = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return skinLibrary.value.slice(start, end)
})

// 关键修复：使用ref包裹viewer
const viewer = ref(null)
const previewViewer = ref(null)
const viewerCanvas = ref(null)
const previewCanvas = ref(null)
let animation = null

// 格式化日期
const formatDate = (date) => {
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}

// 初始化皮肤查看器
const initSkinViewer = () => {
  if (viewer.value) {
    viewer.value.dispose()
    viewer.value = null
  }

  if (previewViewer.value) {
    previewViewer.value.dispose()
    previewViewer.value = null
  }


  if (!selectedCharacter.value || !viewerCanvas.value) return


// 固定画布尺寸
  const width = 300
  const height = 450

// 初始化当前模型查看器
  viewer.value = new SkinViewer({
    canvas: viewerCanvas.value,
    width: width,
    height: height,
    skin: `https://crafatar.com/skins/${selectedCharacter.value.uuid}`,
  })

  viewer.value.nameTag = selectedCharacter.value.name
  viewer.value.camera.position.z = 70
  viewer.value.zoom = 0.7

// 初始化预览模型查看器
  previewViewer.value = new SkinViewer({
    canvas: previewCanvas.value,
    width: width,
    height: height,
    skin: `https://crafatar.com/skins/${selectedCharacter.value.uuid}`,
  })

  previewViewer.value.camera.position.z = 70
  previewViewer.value.zoom = 0.7

  updateAnimation()
}

// 更新动画
const updateAnimation = () => {
  if (!viewer.value) return

  if (isAnimating.value) {
    switch (currentAnimationType.value) {
      case 'walk':
        animation = viewer.value.animation = new WalkingAnimation()
        animation.speed = 0.8
        break
      case 'run':
        animation = viewer.value.animation = new RunningAnimation()
        animation.speed = 0.5
        break
      case 'idle':
        animation = viewer.value.animation = new IdleAnimation()
        break
    }
  } else {
    viewer.value.animation = null
  }
}

// 切换动画
const toggleAnimation = () => {
  isAnimating.value = !isAnimating.value
  updateAnimation()
}

// 选择角色
const selectCharacter = (character) => {
  selectedCharacter.value = character
  selectedSkinIndex.value = -1
  editMode.value = false
  showMoreActions.value = false
  nextTick(() => {
    initSkinViewer()
  })
}

// 选择皮肤
const selectSkin = (index) => {
  selectedSkinIndex.value = index
  if (previewViewer.value && selectedCharacter.value) {
    previewViewer.value.skin = `https://crafatar.com/skins/${skinLibrary.value[index].uuid}`
    previewViewer.value.loadSkin(previewViewer.value.skin)
  }
}

// 保存更改
const saveChanges = () => {
  editMode.value = false
  ElMessage.success(' 角色信息已保存')
}

// 保存皮肤更改
const saveSkinChanges = () => {
  if (selectedSkinIndex.value >= 0) {
    selectedCharacter.value.uuid = skinLibrary.value[selectedSkinIndex.value].uuid
    ElMessage.success(' 皮肤已保存')
    initSkinViewer()
  } else {
    ElMessage.warning(' 请先选择皮肤')
  }
}

// 删除角色
const deleteCharacter = () => {
  deleteCharacterName.value = selectedCharacter.value.name
  deleteCharacterId.value = selectedCharacter.value.id
  showDeleteConfirm.value = true
}

// 确认删除
const confirmDelete = () => {
  characters.value = characters.value.filter(c => c.id !== deleteCharacterId.value)
  selectedCharacter.value = null
  showDeleteConfirm.value = false
  ElMessage.success(' 角色已删除')
}

// 创建角色
const createCharacter = () => {
  if (!newCharacter.value.name || !newCharacter.value.uuid) {
    ElMessage.warning(' 请填写完整信息')
    return
  }

  const newChar = {
    id: characters.value.length + 1,
    name: newCharacter.value.name,
    shortName: newCharacter.value.name.length > 10
        ? newCharacter.value.name.substring(0, 8) + "..."
        : newCharacter.value.name,
    uuid: newCharacter.value.uuid,
    prefix: "[新]",
    group: "默认组",
    createdAt: new Date()
  }

  characters.value.push(newChar)
  newCharacter.value = { name: "", uuid: "" }
  showCreateForm.value = false
  selectCharacter(newChar)
  ElMessage.success(' 角色创建成功')
}

// 切换编辑模式
const toggleEditMode = () => {
  editMode.value = !editMode.value
  showMoreActions.value = false
}

// 切换更多操作
const toggleMoreActions = () => {
  showMoreActions.value = !showMoreActions.value
}

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
}

// 关闭弹窗
const handleClose = (done) => {
  if (newCharacter.value.name || newCharacter.value.uuid) {
    ElMessageBox.confirm(' 确定要取消创建角色吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      showCreateForm.value = false
      newCharacter.value = { name: "", uuid: "" }
    })
  } else {
    showCreateForm.value = false
    done()
  }
}

// 生命周期钩子
onMounted(() => {
  if (characters.value.length > 0) {
    selectCharacter(characters.value[0])
  }
})

onBeforeUnmount(() => {
  if (viewer.value) viewer.value.dispose()
  if (previewViewer.value) previewViewer.value.dispose()
})

// 监听动画类型变化
watch(currentAnimationType, updateAnimation)
</script>

<style scoped>
/* 基础样式 */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #0f111a;
  color: #e0e3ff;
  overflow: hidden;
}

/* 主布局 */
.character-manager {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 左侧角色列表 */
.character-list {
  width: 400px;
  padding: 20px;
  background-color: #13141f;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #4e7de4;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
}

.character-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.character-item:hover {
  background-color: rgba(78, 125, 228, 0.1);
  border-color: rgba(78, 125, 228, 0.3);
}

.character-item.active {
  background-color: rgba(16, 185, 129, 0.15);
  border-left: 3px solid #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

.character-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.character-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.add-character {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: rgba(78, 125, 228, 0.2);
  color: #4e7de4;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}

.add-character:hover {
  background: rgba(78, 125, 228, 0.3);
  transform: translateY(-1px);
}

/* 中间角色信息区 */
.character-info {
  width: 800px;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(19, 20, 31, 0.8) 0%, rgba(15, 17, 26, 0.9) 100%);
}

.info-card {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-header h3 {
  margin: 0;
  color: #4e7de4;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(78, 125, 228, 0.3);
}

.edit-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(78, 125, 228, 0.3) 0%, rgba(78, 125, 228, 0.2) 100%);
  color: #e0e3ff;
  border: 1px solid rgba(78, 125, 228, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.edit-btn:hover {
  background: linear-gradient(135deg, rgba(78, 125, 228, 0.4) 0%, rgba(78, 125, 228, 0.3) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(78, 125, 228, 0.2);
}

.info-content {
  flex: 1;
}

.info-row {
  display: flex;
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s;
}

.info-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(78, 125, 228, 0.2);
}

.info-label {
  width: 100px;
  color: #8b93b0;
  font-size: 14px;
  font-weight: 500;
}

.info-value {
  flex: 1;
  color: #e0e3ff;
  font-size: 14px;
  font-weight: 500;
}

.edit-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #8b93b0;
  font-size: 14px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(15, 17, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e0e3ff;
  font-size: 14px;
  transition: all 0.2s;
}

.form-group input:focus {
  border-color: #4e7de4;
  box-shadow: 0 0 0 2px rgba(78, 125, 228, 0.2);
  outline: none;
}

.info-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.save-btn {
  padding: 14px;
  background: linear-gradient(135deg, #4e7de4 0%, #10b981 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.more-actions {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.toggle-more {
  padding: 10px;
  background: transparent;
  color: #8b93b0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.toggle-more:hover {
  background: rgba(255, 255, 255, 0.05);
}

.more-actions-content {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.delete-btn {
  padding: 10px;
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.delete-btn:hover {
  background: rgba(239, 68, 68, 0.3);
}

.info-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8b93b0;
}

.info-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.2);
}

.info-placeholder p {
  font-size: 16px;
  margin: 0;
}

/* 模型预览区 - 重点优化部分 */
.skin-preview {
  flex: 1;
  min-width: 300px;
  background-color: #13141f;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.preview-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.current-model, .skin-preview-model {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.preview-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-header h3 {
  margin: 0;
  color: #4e7de4;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1;
}

.fixed-aspect-ratio {
  position: relative;
  width: 300px;
  height: 450px;
  max-width: 100%;
  max-height: 100%;
}

.fixed-aspect-ratio canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
}

.skin-controls {
  padding: 16px;
  background: rgba(19, 20, 31, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.animation-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.skin-controls button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(78, 125, 228, 0.2);
  color: #e0e3ff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

.skin-controls button:hover {
  background: rgba(78, 125, 228, 0.4);
  transform: scale(1.1);
}

.skin-controls select {
  background: rgba(15, 17, 26, 0.8);
  color: #e0e3ff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.preview-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8b93b0;
  padding: 20px;
}

.preview-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.2);
}

.preview-placeholder p {
  font-size: 16px;
  margin: 0;
}

/* 右侧我的皮肤 */
.my-skins {
  width: 280px;
  padding: 20px;
  background-color: #13141f;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0;
}

.skin-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: rgba(255, 255, 255, 0.05);
}

.skin-card:hover {
  background-color: rgba(78, 125, 228, 0.1);
}

.skin-card.selected {
  background-color: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
}

.skin-image-container {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
}

.skin-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.skin-name {
  width: 100%;
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skin-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.save-skin-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #4e7de4, #10b981);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}

.save-skin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 弹窗样式 */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .character-manager {
    flex-wrap: wrap;
    height: auto;
    overflow-y: auto;
  }

  .character-list {
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    order: 1;
  }

  .character-item {
    flex-direction: column;
    min-width: 80px;
    margin-right: 12px;
    margin-bottom: 0;
    text-align: center;
  }

  .character-avatar {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .character-name {
    font-size: 12px;
  }

  .add-character {
    min-width: 120px;
    margin-top: 0;
    margin-left: 12px;
  }

  .character-info {
    width: 50%;
    order: 2;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .skin-preview {
    width: 50%;
    order: 3;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .my-skins {
    width: 100%;
    order: 4;
    border-left: none;
  }
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  background: #13141f !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;

  .el-dialog__header {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 16px 20px !important;

    .el-dialog__title {
      color: #e0e3ff !important;
      font-weight: 600 !important;
    }
  }

  .el-dialog__body {
    padding: 20px !important;
    color: rgba(224,227,255,0.8) !important;
  }

  .el-dialog__footer {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: 16px 20px !important;
  }
}

/* 按钮样式优化 */
:deep(.el-button) {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;

  &.el-button--primary {
    background: linear-gradient(135deg, #4e7de4 0%, #10b981 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(78,125,228,0.3) !important;

    &:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(78,125,228,0.4) !important;
    }
  }

  &.el-button--danger {
    background: rgba(239,68,68,0.2) !important;
    border-color: rgba(239,68,68,0.3) !important;

    &:hover {
      background: rgba(239,68,68,0.3) !important;
    }
  }
}

/* 分页器样式优化 */
:deep(.el-pagination) {
  .btn-prev, .btn-next, .number {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e0e3ff !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 4px !important;

    &:hover {
      background: rgba(78,125,228,0.2) !important;
    }
  }

  .active {
    background: #4e7de4 !important;
    border-color: #4e7de4 !important;
  }
}

@media (max-width: 768px) {
  .character-info,
  .skin-preview {
    width: 100%;
  }

  .fixed-aspect-ratio {
    width: 250px;
    height: 375px;
  }
}

@media (max-width: 480px) {
  .section-header h3 {
    font-size: 14px;
  }

  .fixed-aspect-ratio {
    width: 200px;
    height: 300px;
  }

  .skin-card {
    padding: 4px;
  }

  .skin-name {
    font-size: 12px;
  }
}
</style>